<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>simple sticky nav</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      padding: 0 40px;
    }
    p {
      margin: 20px 0;
      border: 1px solid red;
      padding: 10px 20px;
    }
    .sticky-header {
      border: 1px solid green;
      padding: 10px 20px;
    }
    .sticky-header.active {
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <p>Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti quisquam commodi vitae, ab tempore deleniti amet, nisi voluptates officiis. Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti quisquam commodi vitae, ab tempore deleniti amet, nisi voluptates officiis. Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti quisquam commodi vitae, ab tempore deleniti amet, nisi voluptates officiis. Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti quisquam commodi vitae, ab tempore deleniti amet, nisi voluptates officiis. Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti quisquam commodi vitae, ab tempore deleniti amet, nisi voluptates officiis. Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti quisquam commodi vitae, ab tempore deleniti amet, nisi voluptates officiis. Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti quisquam commodi vitae, ab tempore deleniti amet, nisi voluptates officiis. Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti quisquam commodi vitae, ab tempore deleniti amet, nisi voluptates officiis. Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti quisquam commodi vitae, ab tempore deleniti amet, nisi voluptates officiis. Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti quisquam commodi vitae, ab tempore deleniti amet, nisi voluptates officiis. Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti quisquam commodi vitae, ab tempore deleniti amet, nisi voluptates officiis. Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti quisquam commodi vitae, ab tempore deleniti amet, nisi voluptates officiis. Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.</p>
  <div class="sticky-header">
    <span>这是标题</span>
  </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti quisquam commodi vitae, ab tempore deleniti amet, nisi voluptates officiis. Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti quisquam commodi vitae, ab tempore deleniti amet, nisi voluptates officiis. Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti quisquam commodi vitae, ab tempore deleniti amet, nisi voluptates officiis. Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti quisquam commodi vitae, ab tempore deleniti amet, nisi voluptates officiis. Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti quisquam commodi vitae, ab tempore deleniti amet, nisi voluptates officiis. Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti quisquam commodi vitae, ab tempore deleniti amet, nisi voluptates officiis. Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti quisquam commodi vitae, ab tempore deleniti amet, nisi voluptates officiis. Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti quisquam commodi vitae, ab tempore deleniti amet, nisi voluptates officiis. Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti quisquam commodi vitae, ab tempore deleniti amet, nisi voluptates officiis. Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti quisquam commodi vitae, ab tempore deleniti amet, nisi voluptates officiis. Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti quisquam commodi vitae, ab tempore deleniti amet, nisi voluptates officiis. Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti quisquam commodi vitae, ab tempore deleniti amet, nisi voluptates officiis. Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti quisquam commodi vitae, ab tempore deleniti amet, nisi voluptates officiis. Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti quisquam commodi vitae, ab tempore deleniti amet, nisi voluptates officiis. Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti quisquam commodi vitae, ab tempore deleniti amet, nisi voluptates officiis. Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti quisquam commodi vitae, ab tempore deleniti amet, nisi voluptates officiis. Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti quisquam commodi vitae, ab tempore deleniti amet, nisi voluptates officiis. Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti quisquam commodi vitae, ab tempore deleniti amet, nisi voluptates officiis. Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti quisquam commodi vitae, ab tempore deleniti amet, nisi voluptates officiis. Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti quisquam commodi vitae, ab tempore deleniti amet, nisi voluptates officiis. Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti quisquam commodi vitae, ab tempore deleniti amet, nisi voluptates officiis. Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti quisquam commodi vitae, ab tempore deleniti amet, nisi voluptates officiis. Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti quisquam commodi vitae, ab tempore deleniti amet, nisi voluptates officiis. Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti quisquam commodi vitae, ab tempore deleniti amet, nisi voluptates officiis. Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti quisquam commodi vitae, ab tempore deleniti amet, nisi voluptates officiis. Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti quisquam commodi vitae, ab tempore deleniti amet, nisi voluptates officiis. Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti quisquam commodi vitae, ab tempore deleniti amet, nisi voluptates officiis. Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti quisquam commodi vitae, ab tempore deleniti amet, nisi voluptates officiis. Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti quisquam commodi vitae, ab tempore deleniti amet, nisi voluptates officiis. Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam corrupti quisquam commodi vitae, ab tempore deleniti amet, nisi voluptates officiis. Officia ea accusamus hic officiis esse, aperiam mollitia. Magnam, autem.</p>

  <script> 
    let stickyHeader = document.querySelector('.sticky-header')
    // 要将 stickyHeader.offsetTop 的初始值保存起来，而不是在 scroll 时再去实时获取
    // 以下两句在获取初始值时是等效的
    // let changePoint = stickyHeader.offsetTop
    let changePoint = stickyHeader.getBoundingClientRect().top

    // scrollTop 无效，要使用 scrollY
    // 样式的增删: 通过增删 CSS 类来实现 element.classList.add()/element.classList.remove()
    document.addEventListener('scroll', (event) => {
      if (window.scrollY > changePoint) {
        stickyHeader.classList.add('active')
      } else {
        stickyHeader.classList.remove('active')
      }
    })
  </script>
</body>
</html>
